Пам'ятка по CSS
Dave Shea
При верстці сайту за допомогою CSS ви обов'язково натрапите на безліч проблем. І кожного разу ви будете битися головою об стіну в спробах обійти черговий глюк. Даний документ покликаний полегшити вам процес розробки, і служить коротким довідником, до якого ви можете звертатися щоразу, коли зіткнетеся з непереборною перешкодою.
Якщо у вас є що додати до цього документа, залиште свій коментар тут.
Даний документ перекладений на французьку, німецьку, іспанську, італійську, угорською, фінською, російська, японська та китайська мови.
Щось не так? Перевірте код валідатором!
При налагодженні свого коду ви заощадите багато часу і нервів, якщо в першу чергу перевірите його валідатором. Найчастіше проблеми з компонуванням сторінки викликані неправильним XHTML або CSS.
Створюйте і тестуйте свій CSS-код спочатку в сучасних "просунутих" браузерах, і лише потім - в інших, але не навпаки
Якщо ви тестуєте сайт у неякісному браузері, ваш код починає залежати від неправильного відображення цим браузером. Коли настане час перевірити сайт в браузерах, вірно підтримують стандарти, ви напевно засмутитеся побаченим. Таким чином, почніть з передових браузерів, а потім додайте до коду трюки для менш вдалих. Таким чином ваш код з самого початку буде відповідати стандартам, і вам не доведеться дуже багато "чаклувати" для підтримки інших браузерів. Сьогодні самими передовими браузерами є Mozilla, Safari, або Opera.
Переконайтеся, що бажаний ефект дійсно існує.
Існують розширення CSS, специфічні для конкретних браузерів, але що не входять в офіційну специфікацію каскадних таблиць. Якщо ви намагаєтеся застосувати властивість filter або відформатувати зовнішній вигляд смуги прокрутки, знайте - ви використовуєте специфічний код, що працює тільки в IE. Якщо валідатор раптом пише вам, що ваш код не відповідає специфікації, скоріше всього це через те, що в ньому присутнє таке специфічні розширення, і воно не буде працювати в інших браузерах.
Застосовуючи плаваючі блоки, переконайтеся в тому, що вони не заважають сусідам
"Плаваючі блоки" підступні, і вони не завжди ведуть себе так, як очікується. Якщо раптом вийшло так, що плаваючий блок вилазить за межі містить його елемента, або ж він веде себе не так, як ви хочете - упевніться в коректності того, чого ви хочете домогтися. Зверніться за подробицями до керівництва Еріка Мейєра.
Поля (margins) завжди "згортаються". Користуйтеся замість них відступами (padding) або межами
Якщо у вас раптом з'являється порожній простір там, де воно вам не потрібно, або навпаки - нема вільного простору там, де воно вам потрібно, це скоріше за все відбувається через полів (margins), які мають звичку "згортатися". Andy Budd у своїй статті описує цей глюк і дає поради, як його уникнути.
Намагайтеся не ставити елементу одночасно відступ / кордон І фіксовану ширину
IE5 неправильно реалізує блокову модель CSS, через що ваша сторінка може перетворитися на кашу. Існує кілька прийомів обійти цей глюк, але краще за все взагалі з ним не зв'язуватися: задавайте потрібний відступ в батьківському елементі, а фіксовану ширину - у дочірньому.
Як уникнути миготіння чистого HTML в IE
Якщо ви використовуєте зовнішню таблицю стилів, підключаючи її за допомогою директиви @ import, то рано чи пізно ви помітите, що IE встигає "блиснути" на екрані неформатований HTML перш, ніж застосує до нього стилі. Цю проблему можна вирішити таким чином.
Не використовуйте min-width в IE
Він не підтримує цю властивість. Але він розглядає width як min-width в деякій мірі, тому за допомогою невеликого фільтра для IE, ви можете отримати точно ефект min-width в IE.
Якщо щось не так, зменшіть ширину
Іноді з-за погрішностей округлення складання виду 50% + 50% дає в результаті що-небудь типу 100.1%. Це призводить до того, що дбайливо створена вами верстка "розповзається" в деяких браузерах. Лікується просто: зменшуйте ширину з 50% до 49% або навіть 49,9%.
IE показує все не так, як треба?
Можливо, ви напоролися на знаменитий "Peekaboo bug", особливо якщо баг проявляється при наведенні курсору на посилання. Дивіться рішення у статті "Позиція - це наше все!"
Будьте обережні, задаючи стилі для "якорів"
Якщо у своєму коді ви використовуєте класичні якоря (), то скоро помітите, що вони теж реагують на псевдо-класи: hover і: active. Уникнути цього можна, застосувавши до якорів id, або ж застосовуючи для них злегка збочений синтаксис типу: link: hover,: link: active
Пам'ятайте про порядок опису посилань.
Задаючи псевдокласи для посилань, робіть це завжди ось у такому порядку: Link, Visited, Hover, Active (запам'ятайте цей порядок за допомогою слів "LoVe / HAte"). Будь-які інші комбінації не працюють так, як треба. Якщо потрібно використовувати також і псевдоклас: focus, то порядок опису буде таким: Link, Visited, Hover, Focus, Active (LVHFA для запам'ятовування чого Метт Холі придумав фразу "Lord Vader's Handle Formerly Anakin")
Пам'ятайте про правило "TRouBLEd" для кордонів.
Значення для кордонів, полів (margins) і відступів (padding) скорочено описуються в такому порядку: за годинниковою стрілкою в напрямку Top, Right, Bottom, Left (верхнє, праве, нижнє, ліве). Таким чином, запис margin: 0 1px 3px 5px; означає, що верхньої межі немає, ліва дорівнює п'яти пікселям ну і так далі.
Явно вказуйте одиниці вимірювання у ненульових значень
Специфікація CSS вимагає вказувати одиниці вимірювання для всіх величин, пов'язаних з розмірами, відступом або шрифтами (єдине виключення - line-height, як це не дивно). Поведінка окремих браузерів в ситуаціях, коли одиниці виміру не вказані, може бути абсолютно несподіваним. Що стосується нуля, то нуль є нуль незалежно від того, вимірювати його пунктами, пікселями або чимось ще. Одиниці виміру для нього не потрібні. Приклад: padding: 0 2px 0 1em;
Тестуйте різні розміри шрифту
"Просунуті" браузери типу Mozilla і Opera дозволяють змінювати розмір шрифту незалежно від одиниць, в яких він заданий. У деяких користувачів неодмінно шрифти будуть налаштовані так, що їх розмір у браузері виявиться менше або більше за вас. Намагайтеся оптимізувати ваш код під максимально можливий діапазон розмірів шрифту.
Не забувайте про великих і малих буквах
Деякі броузери суворо ставляться до регістру букв. Якщо ви назвали свій клас "homePage", намагайтеся і в стильових таблицях використовувати в точності таке ж ім'я, тому що в суворих броузерах (таких як Mozilla) ім'я "homepage" не еквівалентно "homePage".
Тестуйте, включивши стилі в код сторінки; публікуйте в Мережі, прибравши стилі у зовнішній файл.
Працюючи зі стилями, розміщеними в HTML-коді сторінки, ви не зіткнетеся з можливими помилками при тестуванні, пов'язаними з кешуванням. Це особливо важливо при роботі з деякими браузерами на Mac-платформі. Але не забудьте перед перенесенням сайту в мережу винести всі стилі у зовнішній файл і підключити його через @ import або.
Працюючи над помилками позиціонування, додайте блокам чіткі межі
Універсальне правило типу div {border: solid 1px # f00;} може послужити величезну службу при пошуку помилок позиціонування. Але додавши кордону для окремих елементів, ви зможете точно визначити місця, де блоки налазять один на одного або ж де з'являється зайве пусте простір, що не завжди легко виявити.
Не використовуйте одинарних лапок в описах шляхів для зображень
Задаючи шлях до фонового зображення, відмовтеся від нав'язливого бажання укласти його в лапки. У них немає необхідності, крім того, IE5 для Mac на цих лапках просто заклинить.
Не підключайте порожні зовнішні файли стилів в надії заповнити їх "коли-небудь в майбутньому"
IE5 для Mac заклинить на порожньому файлі, і час завантаження сторінки зросте. Замість цього помістіть в файл хоча б одне стильове правило (або навіть просто коментар) - і MacIE знову повернеться до життя.
Крім того, є деякі аспекти теорії, які не мають прямого відношення до функціональності верстки, але, тим не менш, їх слід дотримуватися при розробці:
Упорядкуйте свій CSS файл
Супроводжуйте кожну групу стильових правил своїм коментарем, групуйте схожі за змістом селектори, визначите для себе правила найменування селекторів і дотримуйтесь ним точно, візуально "відбивайте" селектори пропуском (рекомендуємо використовувати саме пробіл, а не табуляцію - це умова платформ) і дотримуйтесь порядок властивостей.
Називайте класи та ідентифікатори, виходячи з їх призначення, а не зовнішнього вигляду
Створивши клас. Smallblue і вирішивши згодом поміняти в ньому текст на великий і червоний, ви тим самим перекреслить сенс його назви. Замість цього використовуйте класи типів. Copyright і. Pullquote. (Спираючись на функціональне призначення класу)
Покладайтеся на CSS-фільтри лише як на саме останній засіб
CSS-хакі і фільтри дозволяють вибірково застосовувати стилі (або не застосовувати - і таке буває) до різних елементів. Уникайте застосування їх за будь-якого приводу, намагайтеся знайти більш кроссбраузерну рішення. Це часом здорово зберігає нерви і час. Про всяк випадок ось величезний список CSS-фільтрів.
Суміщайте селектори
Чим легше CSS-файл, тим менше потрібно часу на його завантаження. По можливості групуйте селектори, покладайтеся на спадкування властивостей, і зменшуйте обсяг тексту, використовуючи коротку запис властивостей.
Застосовуючи методи заміни зображень, не забувайте про доступність
Класичний метод заміни зображення "FIR" створює проблеми при читанні сторінок голосовими браузерам, і у випадках, коли користувач відключив завантаження зображень. Проте цьому методу є альтернативи.